<template>
  <el-row >
     <div class="drawer_ywyj_title">{{title}}</div>
     <div class="drawer_ywyj_content">
      <el-tag
           style="margin-left: 10px; margin-right: 10px; margin-top: 10px;margin-bottom: 10px;"
            :key="tag.title"
            v-for="(tag,index) in itemType"
            :disable-transitions="false"
            @click="tagClick(index)"
            :type="tag.choose? '':'info'"
           >
            {{tag.title}}
      </el-tag>
      <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
      </el-input>
      <el-button v-else class="button-new-tag" size="mini"  type="primary" round  @click="showInput" icon="el-icon-plus">自定义</el-button>
     </div>
</el-row>

</template>

<script>
export default {
  name: "MyTag",
  props:{
     title:String,
     itemType:Array,
     chooseType:String


  },
  data() {
    return {
        // itemType: [{title:'标签一',choose:true},{title:'标签二',choose:true},{title:'标签三',choose:true}],
        inputVisible: false,
        inputValue: ''
      
    };
  },
  created() {
    
  },
  methods: {

    tagClick(index){
      if(this.chooseType=='single'){
      this.itemType.forEach(element => {
          element.choose=false;
      });
      }
       this.itemType[index].choose=!this.itemType[index].choose

     },
     showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      //  handleClose(tag) {
      //   this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      // },

        handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          let index=this.itemType.findIndex((res)=> res.title == inputValue)
          // console.info("idnex",index)
          if(index==-1){
             this.itemType.push({title:inputValue,choose:false});
          }
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
    
  }
};
</script>

<style scoped lang="scss">

.drawer_ywyj_title{
  margin-top: 30px;
   font-size: 15px;
   font-weight: 700;
   margin-left: 20px;
}

::v-deep span:hover{
     cursor: pointer;   
}
.input-new-tag{
  width: 130px;
}
.drawer_ywyj_content{
  margin-top: 30px;
  margin-left: 20px;
  margin-bottom: 30px;
}

</style>
